<!DOCTYPE html>
 <head>
<meta charset="ISO-8859-1" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# game: http://ogp.me/ns/game#">
  <meta property="fb:app_id"      content="241345409276553" /> 
  <meta property="og:type"        content="game" /> 
  <meta property="og:url"         content="http://stewiemaze.appspot.com" /> 
  <meta property="og:title"       content="Stewiemaze" /> 
  <meta property="og:description" content="Kill Lois!" /> 
  <meta property="og:image"       content="http://stewie-griffin-lover.tripod.com/sitebuildercontent/sitebuilderpictures/familyguy_stewie_240x260_070220041210.jpg">

<link type="text/css" rel="stylesheet" href="Stewiemaze.css">
<style type="text/css">

.instructions-style {
	font-family: "Courier New";
	text-align: left;
	font-size: 0.9em;
}

</style>
<title>Family Guy Game</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/tinybox.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script>
	// helper function to get cookies
	function getCookie(c_name) {
		var i,x,y,ARRcookies=document.cookie.split(";");
		for (i=0;i<ARRcookies.length;i++) {
				x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
				y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
				x=x.replace(/^\s+|\s+$/g,"");
				if (x==c_name) {
				return unescape(y);
			}
			}
	}
	
	function del_cookie(name) {
		document.cookie = name +
		'=; expires=Thu, 01-Jan-70 00:00:01 GMT;';
	}
</script>
</head>
<body>

	<div id="fb-root"></div>
		<script>		
  		window.fbAsyncInit = function() {
    		FB.init({
      			appId      : '241345409276553', // App ID
      			channelUrl : '//4.stewiemaze.appspot.com/channel.html',
      			status     : true, // check login status
      			cookie     : true, // enable cookies to allow the server to access the session
      			xfbml      : true  // parse XFBML
    		});

    		FB.getLoginStatus(function(response) {
    			  if (response.status === 'connected') {
    				  var t = getCookie("accesToken");
    				  var t_current = response.authResponse.accessToken;
    				  if (t != null && t != "" && t != t_current) {
    					  window.location.reload();
    				  }
    				  document.cookie = "accesToken=" + response.authResponse.accessToken;  
    			  } else if (response.status === 'not_authorized') {
    				  $('#social-plugins').remove();
    			  } else {
    				  $('#social-plugins').remove();
    				  var access = getCookie("accesToken");
    				  if (access != "" && access != null) {
    				  	del_cookie("accesToken");
    				  	del_cookie("nickname");
    				  	del_cookie("highscore");
    				  	del_cookie("tempScore");
    					alert("you logged out of facebook, refreshing the page");
    					window.location.reload();
    				  }
    			  }
    		});
    		


  		};

  		// Load the SDK Asynchronously
  		(function(d, s, id) {
  			var js, fjs = d.getElementsByTagName(s)[0];
  			if (d.getElementById(id)) return;
  			js = d.createElement(s); js.id = id;
  			js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=241345409276553";
  			fjs.parentNode.insertBefore(js, fjs);
   		} (document, 'script', 'facebook-jssdk'));
	</script>
	<script type="text/javascript" src="js/maze.js"></script>
	<script type="text/javascript" src="js/drawing.js"></script>
	<script type="text/javascript" src="org.elip.stewiemaze.Stewiemaze/org.elip.stewiemaze.Stewiemaze.nocache.js"></script>
	<script>
	
		// a set of global variables. these variables are accessed many time in internal functions of the .js files
		var shotFired = false;
		var numberOfRows = 20;
		var numberOfColumns = 26;
		var cellDimentions = 30;
		var currentStewieX = cellDimentions * (numberOfColumns - 1) + 5;
		var currentStewieY = cellDimentions * (numberOfRows - 2) + 5;
		var stewieWidth = cellDimentions - 10;
		var stewieHeight = cellDimentions - 10;
		var dx=0;
		var dy=0;
		var playing = false;
		var numberOfShotsLeft = 5;
		var up = false;
		var down = false;
		var right = false;
		var left = true;
		var currentShotX = 0;
		var currentShotY = 0;
		var dxshot = 0;
		var dyshot = 0;
		var horizontalShotWidth = 10;
		var horizontalShotHeight = 6;
		var verticalShotWidth = 6;
		var verticalShotHeight = 10;
		var timeLeft = 60;
		
	</script>
	
	<script type="text/javascript">
		
		// play intro sound when checking sound checkbox
		function checkSound(checkbox) {
			if (checkbox.checked) {
				weMeetAgain = new Audio("sound/we-meet-again.mp3");
				weMeetAgain.play();
			}
			if (!checkbox.checked) {
				if (typeof(chase) != "undefined") {
					chase.pause();
					chase.setCurrentTime = 0;
				}
			}
		}
		
		function showNotificationsForm() {
			document.getElementById('notifications-form').style.visibility='visible';
			$('#No').remove();
		}
		
		function explainNotifications() {
			alert("This option allows you to recieve email notification each time another player breaks you record");
		}
		
		function show() {
			$('#fb_register').remove();
			$('#account').remove();
			document.getElementById('no_fb_form').style.visibility='visible';
		}
		
		function login() {
			window.location="http://stewiemaze.appspot.com/logged_in.html"
		}
		

	</script>
	<div id="mainContainer" style="background-color:#FFCC66; width:100%; height:100%; text-align: center; border-style: solid" align="center">
		<table>
			<tr>
				<td valign="top" style="width: 50%">
					<div style="margin-left: 15px; margin-top: 0px; font-family: Courier New; text-align: left; font-size: 0.9em">
						<span>Ever felt bad for Stewie that he cannot succeed in killing Lois? Well here is your chance to help him.</span>
						<br><br>
						<span class="bold-underline">Objective:</span><span>  Complete the maze in the given time and kill her.</span>
						<br><br>
						<span class="bold-underline">Tip:</span><span>  Use the gun to destroy maze bricks, use it wisely since ammunition is limited! (Ctrl to shoot)</span>
						<br>
						<span>Just hit 'N' to start a new game, or click the new game button</span>
						<div align="Center">
						<table>
							<tr>
								<td><img src="images/stewie-header.png" height="50" width="50"></td>
								<td><img src="images/lois-header.png" width="50"></td>
							</tr>
						</table>
						</div>
					<br>
					</div>
					<div id="social-plugins" style="visibility: hidden; vertical-align: top;" align="center">
						<div class="fb-like" data-href="http://stewiemaze.appspot.com" data-send="true" data-width="200" data-show-faces="true"></div>
						<br>
						<br>
						<div class="fb-comments" data-href="http://stewiemaze.appspot.com" data-num-posts="3" data-width="285"></div>
						<br>
						<a href="#" onclick='postToFeed(); return false;'><img src="images/Facebook-Post-Button.png"></img></a>
					
					    <script> 
					      function postToFeed() {
					    	FB.init({appId: "241345409276553", status: true, cookie: true});
					
					        // calling the API ...
					        var obj = {
					          method: 'feed',
					          link: 'https://stewiemaze.appspot.com',
					          picture: 'http://stewie-griffin-lover.tripod.com/sitebuildercontent/sitebuilderpictures/familyguy_stewie_240x260_070220041210.jpg',
					          name: 'Stewie maze',
					          caption: 'Game',
					          description: 'Helping stewie kill lois!'
					        };
					
					        function callback(response) {
					        }
					
					        FB.ui(obj, callback);
					      }
					    
					    </script>
					</div>
					<form name="registration_form" id="register-form" action="register-player.do" method="post" style="visibility: hidden;">
						<ul>
						<li style="text-align: left;">
							<label>your score is :</label>
						</li>
						<div align="left">
							<span>
								<input id="game_score" name="score" readonly="readonly"></input>
							</span>
							<span>
							<fb:login-button id="fb_register" registration-url="http://stewiemaze.appspot.com/fb_registration.html">Register Using Facebook</fb:login-button>
							<a id="account" href="javascript: void(0); show()">I dont have a facebook account</a>
							</span>
						</div>
						</ul>
						<ul id='no_fb_form' style="font-family: Courier New; visibility: hidden;">
							<li style="text-align: left;">
								<label>Nickname<span style="color : red">*</span></label>
							</li>
							<div align="left">
								<span>
									<input type="text" name="nickname" id="nickname_tb"/>
								</span>
								<br>
								<span>Would you like to register for notifications?</span>
								<button type="button" id="yes-notifications" class="button" onclick="showNotificationsForm()">Yes</button>
								<button type="button" class="button" onclick="explainNotifications()">What's this?</button> 
								<button type="submit" id="No" class="button">No thanks, just submit</button>
							</div>  
							<div id="notifications-form" style="visibility: hidden;">
								<li style="text-align: left;">
									<label>Email</label>
								</li>
								<div align="left">
									<span>
										<input type="text" name="email" id="email_tb"/>
									</span>
									<li style="text-align: left;">
										<label>Password</label>
									</li>
									<span>
										<input type="password" name="password" id="password_tb"/>
									</span>
									<button type="submit" class="button">Submit</button>
								</div>
							</div>
						</ul>
					</form>
				</td>
				<td valign="top">
					<canvas id="myCanvas" width="780" height="600" style="margin-top: 0px"></canvas>
					<div align="Center">
						<span>
							<input id="new_game" type="button" value="New Game" class="button">
						</span>
						<span id="hello-friend" style="font-family: Courier New;">
						</span>
					</div>
					<div id="login_area" style="visibility: hidden" align="left">
					<fb:login-button id='fb_login' registration-url="javascript: void(0); TINY.box.show({html:'Please register first by playing a round...',animate:true,close:true,mask:true,boxid:'success',autohide:4,top:-14,left:-17})" on-login='login()'>Login Using Facebook</fb:login-button>
					</div>
				</td>
				<td style="width: 30%" valign="top" align="Center">
					<div style="margin-top: 0px; font-family: Courier New;">
						<table>
							<tr>
								<td><div style="width: 100%; text-align: center;">Shots Left:</div></td>
								<td><div id="shots-left" style="width: 100%; text-align: center;">5</div></td>
							</tr>
						</table>
						<br>
						<table>
							<tr>
								<td><div style="width: 100%; text-align: center;">Time Left:</div></td>
								<td><div id="time-left" style="width: 100%; text-align: center;">60</div></td>
							</tr>
						</table>
						<br>
						<div style="width: 100%; text-align: center; margin-top: 5px">
							Enable Sound<input type="checkbox" id="enable-sound" onclick="checkSound(this)">
						</div>
						<br>
					</div>
					<div id="records_table_area" style="height: 420px; margin-top: 10px;">
					</div>	
				</td>
			</tr>
		</table>
	</div>
	<div id="record_table_get_area"></div>
</body>
<script type="text/javascript" src="js/game-flow.js"></script>
<script>

	// get a reference to our canvas right away, and use it all over
	var canvas = document.getElementById("myCanvas");
	var context = canvas.getContext("2d");
	// draws the walls of the maze(external)
	drawGrid();
	// position stewie in one opening
    drawStewie();
	// position lois in the other opening
    drawLois();
    setInterval(moveStewie,10);
    setInterval(moveShot, 5);
    function decreaseTimer() {
    	if (playing) {
    		timeLeft -= 1;
    		$("#time-left").text(timeLeft);
    		if (timeLeft == 0) {
    			enable_scroll();
    			restore();
    			alert("Sorry, time ran out. try again");
    		}
    	}
    }
    // decrease time by 1 second every second
    setInterval(decreaseTimer, 1000);
</script>
<script>
	
	var tempScore = getCookie("tempScore");
	var token = getCookie("accesToken");
	if (tempScore != null && tempScore != "" && token == null) showRegisterForm(tempScore);
	if (token != null && token != "") {
		$('#register-form').remove();
		$('#login_area').remove();
		document.getElementById('social-plugins').style.visibility='visible';
	}
	else {
		$('#social-plugins').remove();
	}

</script>
</html>